import { UserOutlined } from "@ant-design/icons";
import { Outlet, Link } from "react-router-dom";
import styles from "./css/index.module.less";
import { useEffect, useState } from "react";

export function Index() {
  const [headPic, setHeadPic] = useState();

  useEffect(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      const info = JSON.parse(userInfo);
      setHeadPic(info.headPic);
    }
  }, []);

  return (
    <div id={styles.index_container}>
      <div className={styles.header}>
        <Link to={"/"}>
          <h1>TUTU会客室</h1>
        </Link>

        {/* 如存在头像，则显示头像，否则显示默认头像 */}
        <Link to={"/update_info"}>
          {headPic ? (
            <img src={headPic} width={40} height={40} className={styles.icon} />
          ) : (
            <UserOutlined className={styles.icon} />
          )}
        </Link>
      </div>
      <div className={styles.body}>
        <Outlet></Outlet>
      </div>
    </div>
  );
}
